import React, { PropTypes } from 'react'
import { Form, Input, Modal, Steps, DatePicker, Radio, Select, Upload, Icon } from 'antd'
const FormItem = Form.Item;
import {APIServer} from '../../utils/config'

const RadioGroup = Radio.Group;
const Step = Steps.Step;
const Option = Select.Option;

const Dragger = Upload.Dragger;

const upload = {
  name: 'file',
  showUploadList: false,
  action: APIServer + "dockingwork_personcost",
  headers : {
    'Accept' : localStorage.getItem('token') || ''
  },
};

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
}



const modal = ({
  visible,
  type,
  item = {},
  onOk,
  onCancel,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue
  }
}) => {
  function handleCancel(){
    onCancel()
  }

  function handleOk () {
    validateFields((errors) => {
      if (errors) {
        return
      }

      const status =(String) (type === 'create' ? '0' : parseInt(item.Current) );

      const data = {
        ...getFieldsValue()
      };

      onOk(data)
    })
  }

  /*request('http://192.168.1.115:8888/v1/dockingwork_timeline/?query=parentid:23', {
    method : 'get'
  }).then(res =>{
    localStorage.setItem('Createtime1', res[0] ? res[0]['Createtime'] : '');
    localStorage.setItem('Createtime2', res[1] ? res[1]['Createtime'] : '');
    localStorage.setItem('Createtime3', res[2] ? res[2]['Createtime'] : '');
  });*/

  /*if(type === 'create'){
     item['hidden1'] = 'hidden';
     item['hidden2'] = '';
    item['Button1'] = '提交';
    item['Button2'] = '取消';
  } else {
     item['hidden1'] = '';
     item['hidden2'] = 'hidden';
    item['Button1'] = '通过';
    item['Button2'] = '驳回';

  }*/


  const modalOpts = {
    title: `${type === 'create' ? '新建' : '详情'}`,
    visible,
    onOk: handleOk,
    onCancel:handleCancel,
    wrapClassName: 'vertical-center-modal'
  };

  let myDate = new Date;

  const time = myDate.getFullYear()
    + '-' + ((myDate.getMonth() + 1) < 10 ? '0' : '' )
    + (myDate.getMonth() + 1)
    + '-' + (myDate.getDate() < 10 ? '0' : '')
    + myDate.getDate();

  return (




    <Modal {...modalOpts}
    >
     {/*<div hidden={item.hidden1}>
        <Steps current={item.Current} status="In Progress">
          <Step title="提交" description={localStorage.getItem('Createtime1') || ''} />
          <Step title="审核" description={localStorage.getItem('Createtime2') || ''} />
          <Step title="完成" description={localStorage.getItem('Createtime3') || ''} />
        </Steps>
      </div>*/}

      <div>
        <Form horizontal>
          <FormItem label='返修日期：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('CreateDate', {
              initialValue: "",
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<DatePicker />)}
          </FormItem>
          <FormItem label='设备编号：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('DeviceId', {
              initialValue: item.DeviceId,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='属性：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('DeviceType', {
              initialValue: item.DeviceType,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<RadioGroup>
              <Radio value={'TCL'}>TCL</Radio>
              <Radio value={'警翼'}>警翼</Radio>
              <Radio value={'其他'}>其他</Radio>
            </RadioGroup>)}

          </FormItem>
          <FormItem label='故障类型：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('DeviceTroubleType', {
              initialValue: item.DeviceTroubleType,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Select
              showSearch
              style={{ width: 200 }}
              placeholder="外壳"
              optionFilterProp="children"
              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
              <Option value="外壳">外壳</Option>
              <Option value="存储">存储</Option>
              <Option value="死机">死机</Option>
              <Option value="程序&底座">程序&底座</Option>
              <Option value="屏幕&底座">屏幕&底座</Option>
              <Option value="按键&底座">按键&底座</Option>
              <Option value="屏幕&存储">屏幕&存储</Option>
              <Option value="开关机&底座">开关机&底座</Option>
              <Option value="其他">其他</Option>
            </Select>)}
          </FormItem>
          <FormItem label='故障详情：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('DeviceTroubleDetails', {
              initialValue: item.DeviceTroubleDetails,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='警员：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('Police', {
              initialValue: item.Police,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='警号：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('PoliceId', {
              initialValue: item.PoliceId,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='所属大队：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('Dept', {
              initialValue: item.Dept,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='部门：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('Unit', {
              initialValue: item.Unit,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='备机：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('BackupId', {
              initialValue: item.BackupId,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='配件：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('Plugin', {
              initialValue: item.Plugin,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label='寄回日期：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('ReceiveDeviceDate', {
              initialValue: "",
              rules: []
            })(<DatePicker />)}
          </FormItem>
          <FormItem label='提交：' hasFeedback {...formItemLayout}>
            <Dragger {...upload}>
              <Icon type="plus" />
            </Dragger>
          </FormItem>

          <FormItem label='备注：' hasFeedback {...formItemLayout}>
            {getFieldDecorator('Comment', {
              initialValue: item.Comment,
              rules: []
            })(<Input />)}
          </FormItem>
        </Form>
      </div>


        {/*<FormItem label='姓名：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.name,
            rules: [
              {
                required: true,
                message: '姓名未填写'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='昵称：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('nickName', {
            initialValue: item.nickName,
            rules: [
              {
                required: true,
                message: '昵称未填写'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='性别' hasFeedback {...formItemLayout}>
          {getFieldDecorator('isMale', {
            initialValue: item.isMale,
            rules: [
              {
                required: true,
                type: 'boolean',
                message: '请选择性别'
              }
            ]
          })(
            <Radio.Group>
              <Radio value>男</Radio>
              <Radio value={false}>女</Radio>
            </Radio.Group>
          )}
        </FormItem>
        <FormItem label='年龄：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('age', {
            initialValue: item.age,
            rules: [
              {
                required: true,
                type: 'number',
                message: '年龄未填写'
              }
            ]
          })(<InputNumber min={18} max={100} />)}
        </FormItem>
        <FormItem label='电话：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('phone', {
            initialValue: item.phone,
            rules: [
              {
                required: true,
                message: '不能为空'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='邮箱：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('email', {
            initialValue: item.email,
            rules: [
              {
                required: true,
                message: '不能为空'
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='住址：' hasFeedback {...formItemLayout}>
          {getFieldDecorator('address', {
            initialValue: item.address,
            rules: [
              {
                required: true,
                message: '不能为空'
              }
            ]
          })(<Input />)}
        </FormItem>*/}
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  visible: PropTypes.bool,
  type: PropTypes.string,
  item: PropTypes.object
}

export default Form.create()(modal)
